<script setup>
import {
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { onLoad, onReachBottom, onShow, onReady } from "@dcloudio/uni-app";
import UQRCode from "uqrcodejs"; // npm install uqrcodejs
import { handleGoBack } from "@/utils/router";
import { chartBusiness, chartCategory, chartProduct } from "@/services/index";

import { useUserStore } from "@/stores/user";
// import CustomizeTopBar from "../../pages/components/customize-top-bar/CustomizeTopBar.vue";
import useFormat from "@/hooks/format";
import { date } from "uview-plus/libs/function/test";
import { appInfo } from "@/services/user";
import { appShopSelector } from "@/services/transfer";

const { formatPhone } = useFormat();

const userStore = useUserStore();
// const userInfo = computed(() => userStore.userInfo);

// const user = useUserStore();
const statusBarHeight = ref(0);
const menuButtonInfo = ref(null);
const loading = ref(true);

const userInfo = ref({});
const shopType = ref(1);
const isShopQ = ref(false);
const showSelect = ref("");

const showShop = ref(false);

onShow(() => {});

setTimeout(() => {
  loading.value = false;
}, 500);
const Time = (e) => {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

// 获得当前组件实例
const instance = getCurrentInstance();

// 响应式数据
//兼容小程序
// #ifdef MP-WEIXIN
menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
// #endif
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;

// go back

onMounted(() => {
  // initData();、
});

const goSelectShopType = () => {
  if (userInfo.value.adminPermission && userInfo.value.storePermission) {
    uni.navigateTo({ url: "/pages/users/switch-word/index" });
  } else {
  }
};
const chartSelectIndex = ref(0);
const chartSelect = (index) => {
  console.log(index);
  chartSelectIndex.value = index;
};
//数据
const businessDet = ref({});
const chartCategoryList = ref([]);
const chartFoodsList = ref([]);
const getChartBusiness = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue2.value + " 23:59:59",
      };
    } else {
      data = {
        datePick: selectItem.value.type,
      };
    }
  }
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }
  const res = await chartBusiness(data);
  businessDet.value = res.data;
};

const getChartCategory = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue2.value + " 23:59:59",
      };
    } else {
      data = {
        datePick: selectItem2.value.type,
      };
    }
  }
  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }
  const res = await chartCategory(data);
  chartCategoryList.value = res.data;
};

const getChartProduct = async () => {
  let data = {};
  if (selectItem.value.type) {
    data = {
      datePick: selectItem.value.type,
      pageIndex: 1,
      pageSize: 10,
    };
  } else {
    if (selectItem2.value.type == 4) {
      data = {
        startTime: timevalue.value + " 00:00:00",
        endTime: timevalue2.value + " 23:59:59",
        pageIndex: 1,
        pageSize: 10,
      };
    } else {
      data = {
        datePick: selectItem.value.type,
        pageIndex: 1,
        pageSize: 10,
      };
    }
  }

  let arr = [];
  if (selectDataList.value.length > 0) {
    selectDataList.value.forEach((item) => {
      arr.push(item.id);
    });
    data.shopIds = arr;
  }

  const res = await chartProduct(data);
  chartFoodsList.value = res.data;
};

//图表
const chartData = ref({});
const opts = ref({
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [15, 10, 0, 15],
  enableScroll: true,
  legend: {},
  xAxis: {
    disableGrid: true,
    scrollShow: true,
    itemCount: 4,
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
  },
  extra: {
    line: {
      type: "straight",
      width: 2,
      activeType: "hollow",
    },
  },
});

const chartRes = ref({
  categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
  series: [
    {
      name: "成交量A",
      data: [35, 8, 25, 37, 4, 20],
    },
    {
      name: "成交量B",
      data: [70, 40, 65, 100, 44, 680],
    },
    {
      name: "成交量C",
      data: [100, 80, 95, 150, 112, 132],
    },
  ],
});

const chartDataZ = ref({});

const optsZ = ref({
  dataLabel: false,
  dataPointShape: false,
  legend: {
    show: false,
  },
  color: [
    "#F2F3F5",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [20, 0, 20, 0],
  enableScroll: false,

  xAxis: {
    disabled: true,
    disableGrid: true,
    title: " ",
    scrollShow: true,
    axisLine: false,
  },
  yAxis: {
    disabled: true, //Y轴直接隐藏
    disableGrid: true,
    gridColor: "#CCCCCC",
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: "group",
      width: 15,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      categoryGap: 0,
      seriesGap: 0,
      padding: [0, 0, 0, 0],
    },
  },
});

const chartResZ = ref({
  categories: ["1", "2", "1", "3", "4", "5", "5", "5", "5"],
  series: [
    {
      labelShow: false,
      name: "目标值",

      data: [{ color: "#FFF000", value: 1 }, 10, 0, 0, 0, 0, 0, 0, 0, 0],
    },
  ],
});

nextTick(() => {
  chartData.value = JSON.parse(JSON.stringify(chartRes.value));
  chartDataZ.value = JSON.parse(JSON.stringify(chartResZ.value));
});

const goSetting = () => {
  uni.navigateTo({
    url: "/pages/mysetting/up/index",
  });
};

const goTo = (url) => {
  if (loading.value) return;
  console.log(url);
  if (url === 1) {
    return;
  }
  if (!url) {
    return showToast("暂未开放，敬请期待");
  }
  uni.navigateTo({ url });
};

const selectShow = ref(false);
const selectItem = ref({ type: 2, text: "昨天" });
const selectItem2 = ref({});
const datePick = ref([
  {
    type: 1,
    text: "今天",
  },
  {
    type: 2,
    text: "昨天",
  },
  {
    type: 3,
    text: "近7天",
  },
  {
    type: 4,
    text: "本周",
  },
  {
    type: 5,
    text: "本月",
  },
  {
    type: 6,
    text: "上周",
  },
  {
    type: 7,
    text: "上月",
  },
]);
const selectItemFun = (item, index) => {
  if (index == 1) {
    selectItem2.value = {};
    selectItem.value = item;
    selectShow.value = false;
    getChartBusiness();
    getChartCategory();
    getChartProduct();
  } else {
    if (item.type == 4) {
      // showtime.value = true;
      selectItem.value = {};
      selectItem2.value = item;
    } else {
      selectItem.value = {};
      selectItem2.value = item;
      selectShow.value = false;
      getChartBusiness();
      getChartCategory();
      getChartProduct();
    }
  }
};

const showtime = ref(false);
const timevalue = ref(Time(Date.now()));
const datetimePickerRef = ref(null);
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
const formatter = (type, value) => {
  if (type === "year") {
    return `${value}年`;
  }
  if (type === "month") {
    return `${value}月`;
  }
  if (type === "day") {
    return `${value}日`;
  }
  return value;
};
const confirmDate = (e) => {
  let dateobj = new Date(e.value);

  if (showtime.value == true) {
    minTime.value = e.value;
    timevalue.value =
      dateobj.getFullYear() +
      "-" +
      (dateobj.getMonth() + 1 < 10
        ? "0" + (dateobj.getMonth() + 1)
        : dateobj.getMonth() + 1) +
      "-" +
      (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());
    selectItem.value = {};
    selectItem2.value = { type: 4, text: timevalue.value };
    showtime.value = false;
    selectShow.value = false;
    showtime2.value = true;

    // getChartBusiness();
    // getChartCategory();
    // getChartProduct();
  } else {
    timevalue2.value =
      dateobj.getFullYear() +
      "-" +
      (dateobj.getMonth() + 1 < 10
        ? "0" + (dateobj.getMonth() + 1)
        : dateobj.getMonth() + 1) +
      "-" +
      (dateobj.getDate() < 10 ? "0" + dateobj.getDate() : dateobj.getDate());
    selectItem.value = {};
    selectItem2.value = { type: 4, text: timevalue.value };
    showtime2.value = false;
    selectShow.value = false;

    getChartBusiness();
    getChartCategory();
    getChartProduct();
  }
};

const caseIndex = ref(10);

const toMorePage = () => {
  caseIndex.value = caseIndex.value + 10;
};

//门店筛选

//用户店铺
const introData = ref([]);
const selectShopNum = ref(0);
const selectDate = ref([]);

const getAppShopSelector = async () => {
  try {
    // 发送请求
    let res = await appShopSelector({});
    if (res.code == 200) {
      selectDataList.value = [];
      res.data.datas.forEach((item) => {
        item.select = true;
        selectDataList.value.push(item);
      });
      getChartBusiness();
      getChartCategory();
      getChartProduct();
      introData.value = res.data.datas;
      selectShopNum.value = res.data.datas.length;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

getAppShopSelector();

const getList = async () => {
  try {
    // 发送请求
    let res = await appInfo({});
    if (res.code == 200) {
      selectDataList.value = [];
      res.data.employees.forEach((item) => {
        item.select = true;
        selectDataList.value.push(item);
      });
      getChartBusiness();
      getChartCategory();
      getChartProduct();
      introData.value = res.data.employees;
      selectShopNum.value = res.data.employees.length;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
// getList();
const selectShop = (item) => {
  item.select = !item.select;
  let num = 0;

  introData.value.forEach((item) => {
    if (item.select) {
      num++;
    }
  });
  selectShopNum.value = num;
  //     introData.value = res.data.employees;
};

const selectDataList = ref([]);

const cancel = () => {
  let num = 0;
  showShop.value = false;

  if (selectDataList.value.length > 0) {
    introData.value.forEach((item2) => {
      item2.select = false;
    });

    selectDataList.value.forEach((item) => {
      introData.value.forEach((item2) => {
        if (item2.id == item.id) {
          item2.select = true;
          num++;
        }
      });
    });
    selectShopNum.value = num;
  }
};
const qrFun = () => {
  if (selectShopNum.value < 1) {
    return uni.showToast({
      title: "请选择门店",
      icon: "none",
    });
  }
  showShop.value = false;
  selectDataList.value = [];

  introData.value.forEach((item2) => {
    if (item2.select) {
      selectDataList.value.push(item2);
    }
  });

  getChartBusiness();
  getChartCategory();
  getChartProduct();
};

//区间选择
const showtime2 = ref(false);
const timevalue2 = ref(Time(Date.now()));
const minTime = ref(Date.now());

//无网状态
const connected = () => {
  getAppShopSelector();
};
</script>

<template>
  <top-nav :title="'销售统计'" :border="false" @search="searchFun" rType="auto">
    <template #center>
      <!-- <text>销售分析</text> -->
      <view class="center-top" @click="showShop = true"
        ><text>已选择{{ selectShopNum }}门店 </text
        ><up-icon name="arrow-down" color="#2979ff" size="25rpx"></up-icon
      ></view> </template
  ></top-nav>
  <view class="my-content">
    <!-- 管理端 -->
    <view>
      <van-skeleton
        title
        :row="0"
        :loading="loading"
        class="contents-p-title-skeleton"
      >
        <view class="contents-p-title">
          <text>数据详情展示</text>
          <view class="contents-p-title-right" @click="selectShow = true">
            <text>{{
              selectItem.text
                ? selectItem.text
                : selectItem2.text
                ? timevalue + "~" + timevalue2
                : ""
            }}</text>
            <up-icon name="calendar" color="#333333" size="40rpx"></up-icon>
          </view>
        </view>
      </van-skeleton>

      <view class="pay-yye">
        <van-skeleton title :row="0" :loading="loading">
          <view class="pay-yye-text">
            <text>营业数据</text>
            <text class="pay-yye-time">更新于{{ businessDet.reportDate }}</text>
            <!-- <up-icon name="arrow-right" color="#86909C" size="28rpx"></up-icon> -->
          </view>
        </van-skeleton>

        <view class="pay-yye-k pay-yye-k-two">
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view
              class="pay-yye-item-two"
              @click="goTo('/pages/manage/sale_count/index')"
            >
              <view class="pay-yye-item-title">总销售额</view>
              <view class="pay-yye-item-num pay-yye-item-num-left">
                ¥<up-count-to
                  color="#1679fb"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="36rpx"
                  :endVal="businessDet.salesTotalAmount || 0"
                  :decimals="2"
                ></up-count-to>
              </view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view class="pay-yye-item-two">
              <view class="pay-yye-item-title">总实收</view>
              <view class="pay-yye-item-num"
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="36rpx"
                  :endVal="businessDet.salesTotal || 0"
                  :decimals="2"
                ></up-count-to
              ></view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view class="pay-yye-item-two">
              <view class="pay-yye-item-title">总订单数</view>
              <view class="pay-yye-item-num"
                ><up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  fontSize="36rpx"
                  :endVal="businessDet.orderCount || 0"
                ></up-count-to
              ></view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view class="pay-yye-item-two">
              <view class="pay-yye-item-title">利润</view>
              <view class="pay-yye-item-num"
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="36rpx"
                  :endVal="businessDet.grossProfit || 0"
                  :decimals="2"
                ></up-count-to
              ></view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view class="pay-yye-item-two">
              <view class="pay-yye-item-title">退款单数</view>
              <view class="pay-yye-item-num"
                ><up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  fontSize="36rpx"
                  :endVal="businessDet.refundCount || 0"
                ></up-count-to
              ></view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view class="pay-yye-item-two">
              <view class="pay-yye-item-title">退款总额</view>
              <view class="pay-yye-item-num"
                >¥<up-count-to
                  color="#1d2129"
                  :duration="500"
                  :startVal="0"
                  :bold="true"
                  separator=","
                  fontSize="36rpx"
                  :endVal="businessDet.refundTotal || 0"
                  :decimals="2"
                ></up-count-to
              ></view>
            </view>
          </van-skeleton>
        </view>
      </view>

      <view class="pay-yye">
        <van-skeleton title :row="0" :loading="loading">
          <view class="pay-yye-text">
            <text>销售分类</text>
            <text class="pay-yye-time"></text>
            <!-- <up-icon name="arrow-right" color="#86909C" size="28rpx"></up-icon> -->
          </view>
        </van-skeleton>

        <view class="progress-list">
          <view
            v-for="(item, index) in chartCategoryList && chartCategoryList.data
              ? chartCategoryList.data
              : chartCategoryList"
            :key="index"
          >
            <view class="progress-list-item" v-if="index + 1 <= caseIndex">
              <up-skeleton
                rows="1"
                rowsHeight="80rpx"
                :title="false"
                rowsWidth="100%"
                :loading="loading"
              >
                <view class="progress-list-title">
                  <view class="progress-list-name">
                    <text>{{ item.categoryName }}</text>
                    <text>{{ item.salesAmountPercentage }}%</text>
                  </view>
                  <text class="progress-list-num">¥{{ item.salesAmount }}</text>
                </view>
                <up-line-progress
                  :percentage="item.salesAmountPercentage"
                  height="12rpx"
                  activeColor="#1679FB"
                  :showText="false"
                ></up-line-progress>
              </up-skeleton>
            </view>
          </view>

          <view
            class="no-data"
            v-if="
              (chartCategoryList.length <= 0 && !loading) ||
              (chartCategoryList.data.length <= 0 && !loading)
            "
          >
            <view class="no-data-img">
              <image src="@/static/nodate/datas.png" mode="scaleToFill" />
              <view>暂无数据</view>
            </view>
          </view>

          <view
            class="progress-list-more"
            v-if="
              caseIndex < chartCategoryList.length ||
              caseIndex < chartCategoryList.data.length
            "
          >
            <text @click="toMorePage">查看更多</text>
            <up-icon
              @click="toMorePage"
              class="progress-list-more-icon"
              name="arrow-right-double"
              color="#C9CDD4"
              size="28rpx"
            ></up-icon
          ></view>
        </view>
      </view>

      <!-- <view class="pay-yye">
        <van-skeleton title :row="0" :loading="loading">
          <view class="pay-yye-text">
            <text>门店会员</text>
            <text class="pay-yye-time"></text>
          </view>
        </van-skeleton>

        <view class="pay-yye-k pay-yye-k-two">
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view
              class="pay-yye-item-two pay-yye-item-three"
              style="
                width: 50%;
                box-sizing: border-box;
                background: none;
                border-right: 1rpx solid #d8d8d8;
                border-radius: 0;
              "
            >
              <view class="pay-yye-item-title">新增会员</view>
              <view class="pay-yye-item-num pay-yye-item-num-left">0</view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view
              class="pay-yye-item-two"
              style="
                width: 50%;
                box-sizing: border-box;
                background: none;
                border-radius: 0;
              "
            >
              <view class="pay-yye-item-title">总会员数</view>
              <view class="pay-yye-item-num">0</view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view
              class="pay-yye-item-two pay-yye-item-three"
              style="
                width: 50%;
                box-sizing: border-box;
                background: none;
                border-right: 1rpx solid #d8d8d8;
                border-radius: 0;
              "
            >
              <view class="pay-yye-item-title">会员充值</view>
              <view class="pay-yye-item-num">0</view>
            </view>
          </van-skeleton>
          <van-skeleton
            title
            :row="1"
            :loading="loading"
            class="pay-yye-k-sk-two"
          >
            <view
              class="pay-yye-item-two"
              style="
                width: 50%;
                box-sizing: border-box;
                background: none;
                border-radius: 0;
              "
            >
              <view class="pay-yye-item-title">会员消费占比</view>
              <view class="pay-yye-item-num">0%</view>
            </view>
          </van-skeleton>
        </view>
      </view> -->

      <!-- echart -->
      <!-- <view class="chart">
        <view class="chart-title">
          <view class="chart-title-left">
            <view class="chart-title-item">
              <text
                @click="chartSelect(0)"
                :class="chartSelectIndex == 0 ? 'chart-title-item-active' : ''"
                >销售额</text
              >
              <view
                class="chart-title-item-x"
                v-if="chartSelectIndex == 0 && !loading"
              >
                <view class="chart-title-item-lines"></view>
              </view>
            </view>
            <view class="chart-title-item">
              <text
                @click="chartSelect(1)"
                :class="chartSelectIndex == 1 ? 'chart-title-item-active' : ''"
                >订单数</text
              >
              <view
                class="chart-title-item-x"
                v-if="chartSelectIndex == 1 && !loading"
              >
                <view class="chart-title-item-lines"></view>
              </view>
            </view>
          </view>
          <view
            class="chart-title-right"
            @click="goTo('/pages/manage/ranking/index')"
          >
            <text>更多</text>
            <up-icon name="arrow-right" color="#86909C" size="24rpx"></up-icon>
          </view>
        </view>
       

        <view class="pay-chart">
          <qiun-data-charts
            type="line"
            :opts="opts"
            :chartData="chartData"
            :ontouch="true"
          />
        </view>
      </view> -->

      <view class="pay-yye">
        <van-skeleton title :row="0" :loading="loading">
          <view class="pay-yye-text">
            <text>销售商品</text>
            <view
              class="pay-yye-time-more"
              @click="goTo('/pages/manage/ranking/index')"
              >更多<up-icon
                name="arrow-right"
                color="#86909C"
                size="28rpx"
              ></up-icon
            ></view>
          </view>
        </van-skeleton>
        <view class="progress-list">
          <view
            class="progress-list-item"
            v-for="(item, index) in chartFoodsList && chartFoodsList.data
              ? chartFoodsList.data
              : chartFoodsList"
            :key="index"
          >
            <up-skeleton
              rows="1"
              rowsHeight="80rpx"
              :title="false"
              rowsWidth="100%"
              :loading="loading"
            >
              <view class="progress-list-item-No">
                <view class="progress-list-left">
                  <image
                    v-if="index == 0"
                    src="@/static/home/No1.png"
                    mode="scaleToFill"
                  />
                  <image
                    v-if="index == 1"
                    src="@/static/home/No2.png"
                    mode="scaleToFill"
                  />
                  <image
                    v-if="index == 2"
                    src="@/static/home/No3.png"
                    mode="scaleToFill"
                  />

                  <view v-if="index > 2" class="progress-list-no-test">
                    {{ index + 1 }}
                  </view>
                </view>
                <view class="progress-list-right">
                  <view class="progress-list-title">
                    <view class="progress-list-name">
                      <text>{{ item.productName }}</text>
                      <!-- <text>14%</text> -->
                    </view>
                    <text class="progress-list-num"
                      >¥{{ item.salesAmount }}</text
                    >
                  </view>
                  <up-line-progress
                    activeColor="#1679FB"
                    :percentage="
                      index == 0
                        ? 100
                        : item.salesAmount / chartFoodsList.data[0].salesAmount
                    "
                    height="12rpx"
                    :showText="false"
                  ></up-line-progress>
                </view>
              </view>
            </up-skeleton>
          </view>

          <view
            class="no-data"
            v-if="
              (chartFoodsList.length <= 0 && !loading) ||
              (chartFoodsList.data.length <= 0 && !loading)
            "
          >
            <view class="no-data-img">
              <image src="@/static/nodate/datas.png" mode="scaleToFill" />
              <view>暂无数据</view>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="chart">
        <view class="chart-title chart-title-2">
          库存压力表 <text>近半年</text>

       
        </view>

        <view class="pay-chart-k">
          <view class="pay-chart-lefts">
            <view class="pay-chart-lefts-name"> 库存存量比 </view>
            <view class="pay-chart-lefts-num"
              ><text>67,890</text><text>/12.1%</text></view
            >
          </view>
          <view class="pay-chart-rights"
            ><qiun-data-charts
              type="column"
              :opts="optsZ"
              :chartData="chartDataZ"
              :ontouch="true"
          /></view>
        </view>
      </view> -->
    </view>

    <view class="bt_food"
      ><image src="@/static/index/zone.png" mode="scaleToFill" /><text
        >零壹聚提供技术支持</text
      >
    </view>
  </view>

  <up-popup
    :closeable="true"
    :show="selectShow"
    @close="selectShow = false"
    :safeAreaInsetBottom="true"
    @open="open"
    round="15"
  >
    <view class="popup-content">
      <view class="popup-content-title" @click="showtime = false">取消</view>
      <view class="popup-content-selTop">快捷选择</view>
      <view class="kj-select">
        <view
          class="kj-select-item"
          :class="selectItem.type == item.type ? 'kj-select-item-seleect' : ''"
          v-for="(item, index) in datePick"
          :key="index"
          @click="selectItemFun(item, 1)"
        >
          {{ item.text }}
        </view>
      </view>
      <view class="popup-content-selTop">自定义</view>
      <view class="kj-select">
        <view
          class="kj-select-item"
          :class="selectItem2.type == 1 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 1, text: '今日' }, 2)"
        >
          今日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 2 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 2, text: '昨日' }, 2)"
          >昨日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 3 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 3, text: '近7日' }, 2)"
        >
          近7日
        </view>
        <view
          class="kj-select-item"
          :class="selectItem2.type == 4 ? 'kj-select-item-seleect' : ''"
          @click="selectItemFun({ type: 4, text: '自定义' }, 2)"
        >
          自定义
        </view>
      </view>

      <view class="kj-select" v-if="selectItem2.type == 4">
        <view
          class="kj-select-item kj-select-item2"
          :class="showtime ? 'kj-select-item-seleect' : ''"
          @click="
            showtime = true;
            selectShow = false;
          "
        >
          {{ timevalue }}
        </view>
        <view>-</view>
        <view
          class="kj-select-item kj-select-item2"
          :class="showtime2 ? 'kj-select-item-seleect' : ''"
          @click="
            showtime2 = true;
            selectShow = false;
          "
          >{{ timevalue2 }}
        </view>
      </view>

      <view class="bt-text"> </view>
    </view>
  </up-popup>

  <up-popup
    :show="showShop"
    mode="top"
    @close="cancel"
    :safeAreaInsetTop="true"
    @open="open"
  >
    <view class="popup">
      <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
        <view
          class="popup_item"
          v-for="(item, index) in introData"
          :key="index"
          @click="selectShop(item)"
        >
          <view class="popup_item_left"
            ><text></text> <text>{{ item.name }}</text>
          </view>

          <view class="popup_item_right">
            <view class="popup_item_right_o" v-if="!item.select"></view>
            <image
              v-if="item.select"
              src="@/static/manage/select.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </scroll-view>

      <view style="width: 100%; height: 30rpx"></view>

      <view class="popup_bt">
        <view class="popup_bt_qx" @click="cancel">取消</view>
        <view class="popup_bt_qr" @click="qrFun"
          >确认({{ selectShopNum }})</view
        >
      </view>
    </view>
  </up-popup>

  <up-datetime-picker
    title="开始时间"
    class="top-center"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime = false"
    @confirm="confirmDate"
    @cancel="showtime = false"
    format="YYYY-MM-DD"
    :show="showtime"
    v-model="timevalue"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    mode="date"
  >
  </up-datetime-picker>

  <up-datetime-picker
    class="top-center"
    title="结束时间"
    ref="datetimePickerRef"
    :hasInput="false"
    @close="showtime2 = false"
    @confirm="confirmDate"
    @cancel="showtime2 = false"
    format="YYYY-MM-DD"
    :show="showtime2"
    v-model="timevalue2"
    :formatter="formatter"
    :closeOnClickOverlay="true"
    :minDate="minTime"
    mode="date"
  >
  </up-datetime-picker>

  <!-- 组件方式生成海报和二维码 -->
  <!-- <canvas
    ref="qrcode"
    id="qrcode"
    canvas-id="qrcode"
    style="width: 200px; height: 200px"
    v-show="codeData.showcanvas"
  ></canvas> -->

  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
